<div id="spring" style="position: absolute; left:0px; top:0px; width:100px; height:100px;"><img src="image/spring.png" style="width:100%; height:100%;"></div>
<div id="spring2" style="position: absolute; left:0px; top:0px; width:100px; height:100px;"><img src="image/spring.png" style="width:100%; height:100%;"></div>
<div id="spring3" style="position: absolute; left:0px; top:0px; width:100px; height:100px;"><img src="image/spring.png" style="width:100%; height:100%;"></div>
<div id="fixedObject" style="position: absolute; left:0px; top:0px; width:20px; height:20px; background-color:#55ff55; border-radius: 10px;"></div>
<div id="movingObject" style="position: absolute; left: 0px; top:0px; width:20px; height:20px; /*-webkit-transform: rotateZ(45deg);*/ background-color:#ff5555; border-radius: 10px;"></div>
<div id="movingObject2" style="position: absolute; left: 0px; top:0px; width:20px; height:20px; /*-webkit-transform: rotateZ(45deg);*/ background-color:#5555ff; border-radius: 10px;"></div>
<div id="movingObject3" style="position: absolute; left: 0px; top:0px; width:20px; height:20px; /*-webkit-transform: rotateZ(45deg);*/ background-color:#ffff55; border-radius: 10px;"></div>
<div id="console" style="position: absolute; left: 50px; top:400px;"></div>

<button id="restart" style="position:absolute; top: 100px; left:100px;">Start over</button>
<script type="text/javascript">
var simpleHarmonicMotionTestPhysicalSimulation = new physHtml.main("simpleHarmonicMotionTestPhysicalSimulation");  
function simpleHarmonicMotionTest()
{
  simpleHarmonicMotionTestPhysicalSimulation.initialize();
  simpleHarmonicMotionTestPhysicalSimulation.maxTime = 15000;
  simpleHarmonicMotionTestPhysicalSimulation.console = document.getElementById("console");

  var movingObject = new physHtml.particle;
  var movingObject2 = new physHtml.particle;
  var movingObject3 = new physHtml.particle;

  initialize();

  var fixedObject = new physHtml.particle;
  fixedObject.gravity = $V([0.0, 0.0]);
  fixedObject.radius = 20.0;
  fixedObject.position = $V([200.0, 200.0]);
  fixedObject.velocity = $V([0.0, 0.0]);

  function initialize(){
    movingObject.gravity = $V([0.0, 0.0]);
    movingObject.radius = 20.0;
    movingObject.width = 40.0;
    movingObject.height = 40.0;
    movingObject.position = $V([350.0, 200.0]);
    movingObject.velocity = $V([0.0, 0.0]);
    movingObject.lastUpdatedTime = 0;

    movingObject2.gravity = $V([0.0, 0.0]);
    movingObject2.radius = 20.0;
    movingObject2.width = 40.0;
    movingObject2.height = 40.0;
    movingObject2.position = $V([200.0, 350.0]);
    movingObject2.velocity = $V([0.0, 0.0]);
    movingObject2.lastUpdatedTime = 0;

    movingObject3.gravity = $V([0.0, 0.0]);
    movingObject3.radius = 20.0;
    movingObject3.width = 40.0;
    movingObject3.height = 40.0;
    movingObject3.position = $V([300.0, 300.0]);
    movingObject3.velocity = $V([0.0, 0.0]);
    movingObject3.lastUpdatedTime = 0;
  }

  var springDamper = new physHtml.springDamper();
  springDamper.naturalLength = 100.0;
  springDamper.spring = 100.0;
  springDamper.damping = 0.75;

  var springDamper2 = new physHtml.springDamper();
  springDamper2.naturalLength = 100.0;
  springDamper2.spring = 100.0;
  springDamper2.damping = 0.75;

  var springDamper3 = new physHtml.springDamper();
  springDamper3.naturalLength = 100.0;
  springDamper3.spring = 100.0;
  springDamper3.damping = 0.75;
  
  movingObject.connect(fixedObject, springDamper);
  movingObject2.connect(fixedObject, springDamper2);
  movingObject3.connect(fixedObject, springDamper3);

  var movingObjectHTML = new physHtml.htmlObject(document.getElementById('movingObject'), movingObject);
  var movingObjectHTML2 = new physHtml.htmlObject(document.getElementById('movingObject2'), movingObject2);
  var movingObjectHTML3 = new physHtml.htmlObject(document.getElementById('movingObject3'), movingObject3);

  var fixedObjectHTML = new physHtml.htmlObject(document.getElementById('fixedObject'), fixedObject);
  var springHTML = new physHtml.htmlObject(document.getElementById('spring'), springDamper);
  var springHTML2 = new physHtml.htmlObject(document.getElementById('spring2'), springDamper2);
  var springHTML3 = new physHtml.htmlObject(document.getElementById('spring3'), springDamper3);

  simpleHarmonicMotionTestPhysicalSimulation.htmlObjects.addObject( movingObjectHTML );
  simpleHarmonicMotionTestPhysicalSimulation.htmlObjects.addObject( movingObjectHTML2 );
  simpleHarmonicMotionTestPhysicalSimulation.htmlObjects.addObject( movingObjectHTML3 );
  simpleHarmonicMotionTestPhysicalSimulation.htmlObjects.addObject( fixedObjectHTML );
  simpleHarmonicMotionTestPhysicalSimulation.htmlObjects.addObject( springHTML );
  simpleHarmonicMotionTestPhysicalSimulation.htmlObjects.addObject( springHTML2 );
  simpleHarmonicMotionTestPhysicalSimulation.htmlObjects.addObject( springHTML3 );

  simpleHarmonicMotionTestPhysicalSimulation.physicalObjects.addObject( movingObject );
  simpleHarmonicMotionTestPhysicalSimulation.physicalObjects.addObject( movingObject2 );
  simpleHarmonicMotionTestPhysicalSimulation.physicalObjects.addObject( movingObject3 );
  simpleHarmonicMotionTestPhysicalSimulation.physicalObjects.addObject( fixedObject );

  document.getElementById('restart').addEventListener('click', function() {
    initialize();
    if (simpleHarmonicMotionTestPhysicalSimulation.elapsedTime >= simpleHarmonicMotionTestPhysicalSimulation.maxTime){
      simpleHarmonicMotionTestPhysicalSimulation.elapsedTime = 0;
      simpleHarmonicMotionTestPhysicalSimulation.start();
    }
    else{
      simpleHarmonicMotionTestPhysicalSimulation.elapsedTime = 0;
    }
  });

  simpleHarmonicMotionTestPhysicalSimulation.start();

  return true;
}
</script>
